import React , { Component } from "react";

import Base from "./Base"
import ShengXiao from "./ShengXiao"

export default class TXTW extends Component{
  constructor (props){
    super(props)
    this.state= {
     isShow:[]
    }
 }
  baseinfo(){
    return [
      {name:"特码生肖"},
      {name:"特码头数"},
      {name:"特码尾数"}
    ]
  }
 show(index){
  const { isShow} = this.state
  var num = isShow.indexOf(index)
  num< 0 ? isShow.push(index) : isShow.splice(num,1)
  this.setState({
    isShow
  })
 }
 txtwrender(index){
  const {content} = this.props;
   switch (index){
     case 0: 
     return <ShengXiao {...this.props} content={content.slice(0,12)}></ShengXiao>
     case 1: 
     return <Base {...this.props} content={content.slice(12,17)}></Base>
     case 2:
     return <Base {...this.props} content={content.slice(17,30)}></Base>
   }
 }
  render(){
 
    let baseinfo = this.baseinfo()
     return  <div className="panl">
{          this.baseinfo().map((item,index)=>{
            return  <div className="panel" key={index}>
            <div className="panel_head">
              <div className="icon" onClick={()=>{
                this.show(index)
              }}>
      <i className={this.state.isShow.indexOf(index)>-1 ? "iconfont icon-xiala shang" : "iconfont icon-xiala"}></i>
              </div>
              {item.name}
            </div>
            <div className={this.state.isShow.indexOf(index)>-1 ? "panel_body hidden" : "panel_body"}>
            {this.txtwrender(index)}
            </div>
          </div>
          })
}
      </div>
 

  }
}